<template>
    <div class="main" :style="widthChange">
        <water-header></water-header>
        <div class="content">
            <water-list></water-list>
            <water-map></water-map>
            <water-analysis></water-analysis>
        </div>
    </div>
</template>
<script>
import WaterHeader from './components/Header'
import WaterList from './components/List'
import WaterMap from './components/Map'
import WaterAnalysis from './components/Analysis'
export default {
    name: 'Water',
    data() {
        return{
            zoom: true,
            widthChange: 'width:7680px'
        }
    },
    components: {
        WaterHeader,
        WaterList,
        WaterMap,
        WaterAnalysis
    },
    created() {

    },
    mounted () {
        window.addEventListener('keyup',this.handleKeyup)
    },
    methods: {
        // 键盘事件
        handleKeyup(event){
            const e = event || window.event || arguments.callee.caller.arguments[0]
            if(!e) return
            const {key,keyCode} = e
            if(e.keyCode === 90){
                this.zoom = !this.zoom;
                console.log(this.zoom)
                if(this.zoom){
                    this.widthChange = {transform:'scale(1)'}
                }else{
                    let windowWidth = document.body.clientWidth
                    this.widthChange = {transform:'scale('+windowWidth/7680+')'}
                }
            }
            console.log(keyCode)
            console.log(key)
        }
    }
}
</script>
<style lang="scss" scoped>
    @import "../../assets/style/index";
    .main{
        width: 7680px;
        height: 2160px;
        @include bg
    }
    .content{
        width: 7586px;
        height: 2012px;
        display: flex;
        flex-direction:row;
        padding: 8px 47px 0 47px;
        water-list{
            flex: 3;
        }
        water-map{
            flex: 4;
        }
        water-analysis{
            flex: 3;
        }
    }
</style>